<template>
  <div>
    <van-nav-bar title="随心游app" style="height: 50px;line-height: 50px
  ;background-color:rgb(48, 145, 242)" />
    <van-divider content-position="left">手机号注册</van-divider>
  </div>
  <div>
    <van-row>
      <van-col span="1"></van-col>
      <van-col span="22">
        <van-form>
          <van-cell-group inset>
            <van-field
                v-model="phone"
                required
                :rules="rules.phone"
                label="手机号"
                placeholder="请输入手机号"
            />
          </van-cell-group>
          <van-cell-group inset>
            <van-field
                v-model="sms"
                required
                :rules="rules.code"
                clearable
                label="短信验证码"
                placeholder="请输入短信验证码"
            >
              <template #button>
                <van-button size="small" type="primary" @click="sendCode()" :disabled="btn1">{{btnmsg}}</van-button>
              </template>
            </van-field>
          </van-cell-group>
          <van-button round type="primary" size="large"
                      color="linear-gradient(to right, #ff6034, #ee0a24)" @click="register()">手机注册</van-button>
        </van-form>
      </van-col>
      <van-col span="2"></van-col>
    </van-row>
    <div style="padding-top: 10px; font-size: 14px; ">
      <van-row>
        <van-col span="9"  >
          <router-link to="/phoneLogin">
            手机号登录
          </router-link>
        </van-col>
        <van-col span="6"></van-col>
        <van-col span="9" >
          <router-link to="/findPass">
            密码找回
          </router-link>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>

import {Toast} from "vant";
import router from "@/router";

export default {
  name: "phoneLogin",
  data(){
    return{
      phone:'',
      sms:'',
      fixStyle: '',
      btn1:false,
      seconds:60,
      btnmsg:'发送验证码',
      rules:{
        phone:[{
          pattern:/^1[3-9]{1}\d{9}$/,
          message:'请输入正确的手机号',
          trigger:"onBlur"
        }],
        code:[{
          pattern:/^\d{6}$/,
          message:'请输入正确的验证码格式',
          trigger:"onBlur"
        }]
      }
    }
  },
  methods:{
    register(){
      this.axios.post("/api/user/phoneRegister.do",{
        "phone":this.phone,
        "code":this.sms
      }).then(res=>{
        if (res.data.code) {
          Toast("恭喜你,注册成功,可以登录了");
          this.$router.push({path:"/phoneRegister"})
        }else{
          Toast(res.data.msg)
        }
      })
    },
    sendCode(){
      //开启倒计时
      this.btn1=true;//按钮不可用
      this.btnmsg="重新发送 "+this.seconds+" s";
      //开启定时任务
      var v=setInterval(()=>{
        if(this.seconds>0){
          this.seconds--;
          this.btnmsg="重新发送 "+this.seconds+" s";
        }else {
          clearInterval(v);//停止倒计时
          this.btn1=false;
          this.seconds=60;
          this.btnmsg="再次发送验证码";
        }
      },1000);
      //axios 发送
      this.axios.get("/api/sms/sendPhoneRegister.do?phone="+this.phone).
      then(res=>{
        if(res.data.code==200){
          //成功
          Toast("亲，发送成功！");
        }else{
          //失败
          Toast(res.data.msg);
        }
      })
    }

  }
}
</script>

<style scoped>

</style>